<template>
  <div >
    <team-header :title="gameTitle"></team-header>
    <affiche
      height=31
      interval=3000
      bgColor="#d04519" color="#fffbbc"
      :textList="announcementList"
      direction="horizonal"
      @click.native="goRoute">
    </affiche>
    <div class="intro">
      <div class="intro-up">
        <div class="avatar">
          <img src="https://cn.vuejs.org/images/logo.png"/>
        </div>
        <div class="name">
          <p>创建人</p>
          <p>{{ gameDetail.CREATER_COMPANY || '-' }}</p>
        </div>
        <div class="status">{{gameStatus}}</div>
      </div>
      <div class="intro-down">
        <div class="time">
          <span class="icon icon-time"></span>
          <div class="content">
            <p>比赛时间</p>
            <p>{{ timeZone }}</p>
          </div>
        </div>
        <div class="num">
          <span class="icon icon-people"></span>
          <div class="content">
            <p>比赛总人数</p>
            <p>{{ gameDetail.GAME_ATTEND_PERSON || '-' }}人</p>
          </div>
        </div>
      </div>
    </div>
    <div class="tendency">
      <div class="head">
        <div class="title"><span class="icon icon-zhu"></span>团队平均收益率走势对比</div>
        <div class="go-btn"></div>     <!-- 公共样式 -->
      </div>
      <div class="trend-chart">
         <trend-chart ref="trendChart" :xAxisArr='chartDateArr':seriesArr="chartData"></trend-chart>     <!-- 页面组件 -->
      </div>
    </div>
    <div class="divider"></div>    <!-- 公共样式 -->
    <div class="team-list-multi" v-if="gameDetail.GAME_STEP !== '4' && teamList.length !== 2">
      <div
        class="item"
        v-for="(item, index) in teamList"
        :key="index">
        <div :class="['trophy', 'icon', trophyClass(index + 1)]">{{index  + 1 > 3 ? index + 1 : ''}}</div>
        <div class="brief">
          <p class="name">{{item.GAME_NAME}}</p>
          <p class="num">该队人数
            <span>{{item.GAME_ATTEND_PERSON}}人</span>
          </p>
          <p class="profit">累计平均收益率
              <span>{{Number(item.TOTAL_PROFIT).toFixed(2)}}%</span>
          </p>
        </div>
        <div class="action">
          <div
            class="button button-fill"
            v-if="gameDetail.GAME_STEP === '3'"
            @click="toTeamDetail(item)">报名该队</div>
          <div
            class="button not-started"
            v-if="gameDetail.GAME_STEP === '0'">尚未开始</div>
          <div class="button button-hollow" @click="toTeamDetail(item)">查看赛况</div>
        </div>
      </div>
    </div>
    <div class="team-list-twain" v-if="gameDetail.GAME_STEP !== '4' && teamList.length === 2">
      <div class="item">
        <div class="brief">
          <p class="name">{{twainData[0].name}}</p>
          <div class="profit">
            <p :style="{ color: profitColor(twainData[0].profit) }">
              {{twainData[0].profit}}
            </p>
            <p>累计平均收益率</p>
          </div>
          <p class="num">该队人数<span>{{twainData[0].num}}人</span></p>
        </div>
        <div class="action">
          <div
            class="button button-fill"
            v-if="gameDetail.GAME_STEP === '3'">报名该队</div>
          <div
            class="button not-started"
            v-if="gameDetail.GAME_STEP === '0'">尚未开始</div>
          <div class="button button-hollow">查看赛况</div>
        </div>
      </div>
      <span class="icon icon-vs"></span>
      <div class="item">
        <div class="brief">
          <p class="name">{{twainData[1].name}}</p>
          <div class="profit">
            <p :style="{ color: profitColor(twainData[1].profit) }">
              {{twainData[1].profit}}
            </p>
            <p>累计平均收益率</p>
          </div>
          <p class="num">该队人数<span>{{twainData[1].num}}人</span></p>
        </div>
        <div class="action">
          <div class="button button-fill">报名该队</div>
          <div class="button button-hollow">查看赛况</div>
        </div>
      </div>
    </div>
    <div class="team-list-result" v-if="gameDetail.GAME_STEP === '4'">
      <div
        class="item"
        v-for="(item, index) in teamList"
        :key="index">
        <div :class="['trophy', 'icon', trophyClass(index + 1)]">{{index  + 1 > 3 ? index + 1 : ''}}</div>
        <div class="brief">
          <p class="name">{{item.name}}</p>
          <p class="num">该队人数<span>{{item.num}}人</span></p>
          <p class="profit">累计平均收益率<span>{{item.profit}}</span></p>
        </div>
        <div class="action">
          <span :class="['icon', resultClass(item.result)]"></span>
          <div class="button button-hollow" @click="toTeamDetail(item)">查看成绩</div>
        </div>
      </div>
    </div>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  import TeamGameMixin from './mixins/TeamGameMixin'

  export default {
    name: 'TeamGameDetail',
    mixins: [TeamGameMixin],
    mounted () {
      // this.getChartData()
      // .then((data) => {
      //   let {chartDateArr, chartData} = data
      //   this.$refs.trendChart.updateOpt(chartDateArr, chartData)
      // })
    }
  }

</script>

<style lang="less" scoped>
@import '../../assets/less/icon.less';

@r: 37.5rem;
@basePicUrl: '../../assets/images';

// transition start
.router-slid-enter-active,
.router-slid-leave-active {
    transition: all .4s;
}

.router-slid-enter,
.router-slid-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
}

//mixin start

.flex() {
  display: flex;
}

.flex-row() {
  flex-direction: row;
}

.flex-column() {
  flex-direction: column;
}

.flrh() {
  .flex;
  .flex-row;
  justify-content: center;
}

.flbh() {
  .flex;
  .flex-row;
  justify-content: space-between;
}

.flrv() {
  .flex;
  .flex-row;
  align-content: center;
}

.clickshadow(@height, @opacity) {
  &:active {
    box-shadow: 0px 10px @height -9px rgba(0,0,0,@opacity) inset;
  }
}

.paddingLR() {
  @media screen and (max-width: 335px) {
    padding-left: 10px;
    padding-right: 10px;
  }
  padding-left: 14px;
  padding-right: 14px;
}

.dashline() {
  position: relative;
  &:before {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background-image: linear-gradient(to right, transparent 50%, #d1d1d1 0);
    background-size: 5px 100%;
  }
}

//mixin end
//---------------------------------------------
//----------- common start
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.divider {
  height: 9px;
  background-color: #f1f3f6;
}

.button {
  padding: 0;
  margin: 0;
  .clickshadow(17px, 0.3);
}

.button-fill, .button-hollow, .not-started {
  width: 100%;
  height: 30px;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  font-size: 15px;
  line-height: 26px;
  text-align: center;
}

.button-fill {
  color: #fff;
  border-color: #fd6530;
  background-color: #fd6530;
}

.button-hollow {
  color: #1bafec;
  border-color: #1bafec;
  background-color: #fff;
}

.not-started {
  color: #BFBFBF;
  background-color: #6D6D6D;
  margin-bottom: 14px;
}
//----------- end start

//---------------------------------------------
//------------intro start
.intro {
  background-color: #F7743A;
  padding-top: 12px;
  .paddingLR;
  //------------intro-up begin
  .intro-up {
    // .flbh;
    display: flex;
    padding: 0 4px;
    align-items: center;
  }
  .avatar{
    width: 40px;
    height: 40px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 99px;
      border: 2px solid #FCD2C0;
    }
  }
  .name{
    flex: 1;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
    margin-left: 10px;
  }
  .status{
    min-width: 50px;
    font-size: 16px;
    color: #fffc9d;
  }
  //------------intro-up end
  //------------intro-down begin
  .intro-down {
    margin-top: 10px;
    .paddingLR;
    position: relative;
    .flbh;
    align-items: center;
    .dashline;
    .icon-people, .icon-time {
      width: 26px;
      height: 26px;
      // margin: 0 10px;
    }
    .content {
      width: 70%;
    }
  }
  .num, .time {
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #fff;
    justify-content: space-around;
    p:nth-of-type(1) {
      @media screen and (max-width: 335px) {
        font-size: 11px;
      }
      font-size: 12px;
      font-weight: 300;
    }
    p:nth-of-type(2) {
      @media screen and (max-width: 335px) {
        font-size: 13px;
      }
      font-size: 15px;
      // font-weight: 600;
    }
  }
  .num {
    width: 38%;
  }
  .time {
    width: 62%;
    .content {
      margin-left: -5%;
    }
  }
  //------------intro-down end
}
//------------intro end
//------------tendency start
.tendency {
  background: #fff;
  border-bottom: 1px solid #e7e7e7;
  //------------head begin
  .head {
    padding-top: 12px;
    padding-bottom: 12px;
    .paddingLR;
    .flbh;
  }
  .title {
    font-size: 14px;
    color: #5b4e85;
    line-height: 24px;
    .flbh;
    .icon {
      display: inline-block;
      width: 28px;
      height: 20px;
    }
  }
  .go-btn {
    width: 72px;
    height: 22px;
    background-image: url('@{basePicUrl}/team/back@2x.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 24px;
    .clickshadow(10px, 0.1);
  }
  .trend-chart {
  }
  //------------head end
}
//------------tendency end
//------------team-list-multi start
.team-list-multi {
  border-top: 1px solid #e7e7e7;
  //------------item start
  .item {
    height: 118px;
    .paddingLR;
    padding-top: 14px;
    padding-bottom: 14px;
    .flbh;
    align-items: center;
    background: #fff;
    border-top: 1px solid #dfdfdf;
    &:first-child {
      border-top: none;
    }
  }
  .trophy {
    width: 41px;
    height: 38px;
  }
  .brief {
    width: 60%;
    line-height: 18px;
    padding-left: 15px;
    padding-right: 5px;
  }
  .name {
    color: #5b4e85;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    transform: scaleX(1.06);
    transform-origin: 0% 0%;
  }
  .num {
    margin-top: 11px;
    color: #666;
    font-size: 12px;
    span {
      color: #1bafec;
      font-size: 13px;
    }
  }
  .profit {
    color: #666;
    font-size: 11px;
    transform: scale(0.85);
    transform-origin: 0% 0%;
    span {
      padding-left: 8px;
      color: #ff3333;
      font-size: 20px;
      font-weight: 600;
    }
  }
  .action {
    width: 125px;
    .button {
      &:first-child {
        margin-bottom: 14px;
      }
    }
  }
  //------------item end
}
//------------team-list-multi end
//------------team-list-twain start
.team-list-twain {
  border-top: 1px solid #e7e7e7;
  position: relative;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: #eaeaea;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  .icon-vs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);
    width: 42px;
    height: 42px;
  }
  //------------item start
  .item {
    .paddingLR;
    padding-top: 14px;
    padding-bottom: 14px;
    align-items: center;
    width: 47%;
    background: #fff;
    border-radius: 6px;
  }
  .trophy {
    width: 41px;
    height: 38px;
  }
  .brief {
    line-height: 18px;
    .name {
      color: #5b4e85;
      font-size: 16px;
      font-weight: 600;
      width: 57%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      // letter-spacing: 1px;
      // transform: scaleX(1.06);
      transform-origin: 0% 0%;
      margin-top: 10px;
      margin-left: auto;
      margin-right: auto;
    }
  }
  .profit {
    margin-top: 15px;
    margin-bottom: 6px;
    p {
      text-align: center;
      &:nth-of-type(1) {
        padding-left: 5px;
        color: #ff3333;
        font-size: 26px;
        font-weight: 600;
      }
      &:nth-of-type(2) {
        color: #666;
        font-size: 12px;
        margin-top: 4px;
      }
    }
  }
  .num {
    margin-top: 4px;
    margin-bottom: 10px;
    color: #666;
    font-size: 12px;
    text-align: center;
    line-height: 26px;
    .dashline;
    span {
      color: #1bafec;
      font-size: 13px;
    }
  }
  .action {
  }
  .button {
    margin: auto;
    &:first-child {
      margin-bottom: 14px;
    }
  }
  //------------item end
}
//------------team-list-twain end
//------------team-list-result end
.team-list-result {
  .team-list-multi;
  .action {
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
      display: block;
      width: 83px;
      height: 25px;
      margin-bottom: 10px;
    }
  }
  .item {
    &:first-child {
      background-image: url('@{basePicUrl}/team/win@2x.png');
      background-size: auto 100%;
      background-position: 100% 0;
      background-repeat: no-repeat;
      .action {
        .icon {
          opacity: 0;
        }
      }
    }
  }
}

.common-app-header {
  background-image: none;
  background-color: #E54F20;
}

.team-header .common-app-btn-back {
  border: 1px solid #FFF!important;
  background-color: none!important;
}
//------------team-list-result end
</style>
